import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Mouse from "./Mouse"
import img from "./logo.svg"


ReactDOM.render(
  <React.StrictMode>
    {/* <Mouse render={mouse => {
      return (<p>鼠标位置：x:{mouse.x},y:{mouse.y}</p>)
    }} /> */}

    {/* 使用chinder模式 */}

    <Mouse>
      {
        mouse => {
          return (
            <div>
              <p>鼠标位置：x:{mouse.x},y:{mouse.y}</p>
            </div>
          )
        }
      }
    </Mouse>

    <Mouse>
      {
        mouse => {
          return (<img src={img} style={{
            position: 'absolute',
            top: mouse.y - 25,
            left: mouse.x - 25
          }}></img>)
        }
      }
    </Mouse>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
